<template>
  <div class="dividerTile">
    <el-divider>
      <div class="name" @click="titleClick">
        <span>{{title}}</span>
        <i :class="!isShow ? 'transform' : ''" class="iconfont icon-arrow-down-filling icon"></i>
      </div>
    </el-divider>
  </div>
</template>

<script>
export default {
  name: 'dividerTile',
  props: {
    title: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    titleClick() {
      // console.log(this.isShow)
      this.$emit('update:isShow', !this.isShow)
    }
  }
}
</script>

<style lang="scss" scoped>
.dividerTile {
  .name {
    cursor: pointer;
    display: flex;
    span {
      margin-right: 2px;
    }
    .icon {
      position: relative;
      top: 4px;
      font-size: 12px;
      color: #303133;
      transition: all 0.2s;
      height: 12px;
      width: 12px;
      &.transform {
        transform: rotate(-90deg);
      }
    }
  }
}
</style>